// --host 10.0.72.7
//入口文件
import Vue from 'vue';

//配置vuex步骤：
//1.安装 npm install vuex -save
//2.导入包
//3.注册vuex到vue中
//4.new Vuex.Store()实例，得到一个数据仓储对象
//5.将vuex创建的store挂载到vm实例上
import Vuex from 'vuex';
Vue.use(Vuex);

/*每次进入页面时，先从本地存储中，把购物车的数据读出来，放到store中*/
var car = JSON.parse(localStorage.getItem('car') || '[]');

var store = new Vuex.Store({
    state:{ //state可想象成组件中的data
        //组件中可以用过this.$store.state.***来访问数据
        car:car//购物车中的商品数据{id:商品的id,count:商品的数量,price:商品的单价,selected:false}
    },
    mutations:{
        /*注意：如果要操作store中的state值，`
        只能通过mutations提供的方法，才能操作对应数据，
        不推荐直接操作state中的数据，以为万一导致了数据紊乱，
        不能快速定位到错误的原因，因为每个组件都可能有操作数据的方法*/
        /*注意：如果组件想要调用 mutations 中的方法，
        只能通过 this.$store.commit('方法名') 这种调用mutations方法
        格式，和this.$emit('父组件中方法名')相似*/
        /*注意：mutations 的函数参数列表中，最多支持两个参数，其中，参数1：是state
        状态；参数2：通过 commit 提交过来的参数；*/
        addToCar(state,goodsInfo){
            /*点击加入购物车，把商品信息，保存到 store 中的car上*/
            var flag = false;/*假设购物车中没有找到对应商品*/

            /*如果购物车中已经有了对应的商品，则更新商品数量即可*/
            state.car.some(item=>{
                if(item.id == goodsInfo.id){
                    item.count += parseInt(goodsInfo.count);
                    flag = true;
                    return true;
                }
            });

            /*如果购物车中没有对应商品，则把商品数据推到car上*/
            if(!flag){
                state.car.push(goodsInfo);
            }

            /*当更新 car 之后，将car存储到本地的localStorage 中*/
            localStorage.setItem('car',JSON.stringify(state.car));

        },

        updateGoodsInfo(state,goodsInfo){
            //修改商品数量
            state.car.some(item =>{
                if(item.id == goodsInfo.id){
                    item.count = parseInt(goodsInfo.count);
                    return true
                }
            })
            /*当修改完商品数量，将car存储到本地的localStorage 中*/
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        //根据 id 从 store 中删除购物中对应的商品
        removeFromCar(state,id){
            state.car.some((item,i)=>{
                if (item.id == id){
                    state.car.splice(i,1);
                    return true;
                }
            })
            /*删除完毕后，将最新的car存储到本地的localStorage 中*/
            localStorage.setItem('car',JSON.stringify(state.car))
        },

        //商品的勾选功能
        updateGoodsSelected(state,info){
            state.car.some(item=>{
                if(item.id == info.id){
                    item.selected = info.selected
                }
            });
            localStorage.setItem('car',JSON.stringify(state.car));
        },

    },
    getters:{
        /*注意：这里的getters，只负责对外提供数据，不负责修改数据，
         如果要修改 state 中的数据，请找 mutations
         */
        //徽章中的总数量（购物车中商品总数量）
        getAllCount(state){
            var c = 0;
            state.car.forEach(item=>{
                c += item.count;
            });
            return c ;
        },
        getGoodsCount(state){
            var o = {};
            state.car.forEach(item=>{
                o[item.id] = item.count;
            })
            return o;
        },
        //商品的勾选功能
        getGoodsSelected(state){
            var o = {};
            state.car.forEach(item=>{
                o[item.id] = item.selected;
            });
            return o;
        },

        //商品数量和总价
        getGoodsCountAndAmount(state){
            var o = {
                count:0, //勾选的数量
                amount:0 //勾选的总价
            };
            state.car.forEach(item=>{
                if (item.selected){
                    o.count += item.count;
                    o.amount += item.price * item.count;
                }
            });
            return o;
        },

        getNewCar(state){
            var newCar = state.car;
            return newCar;
        }

    }
})
/*Vuex总结：
 1.state中的数据，不能直接被修改，如果想要修改，必须通过 mutations
 2.如果组件想要直接从 state 上获取数据：需要 this.$store.state.***
 3.如果组件，想要修改数据，必须使用 mutations 提供的方法，需要通过
   this.$store.commit('方法名',唯一参数)
 4.如果 store 中 state 上的数据，在对外提供数据的时候，需要做一层
   包装，那么，推荐使用 getters，如果需要使用 getters，
   则用this.$store.getters.***
 */


//1.1导入路由包
import VueRouter from 'vue-router';
//1.2使用路由
Vue.use(VueRouter);
//1.3导入自己的router.js路由模块
import router from './router.js'

// 2.1导入vue-resource
import VueResource from 'vue-resource';
// 2.2安装vue-resource
Vue.use(VueResource);

//设置请求跟路径
// Vue.http.options.root = 'http://localhost:3000'

//全局设置post请求时表单数据格式组织形式
Vue.http.options.emulateJSON = true;

//导入组件
import app from './App.vue';

//导入mint-ui中的组件
// import { Header,Swipe, SwipeItem,Button,Lazyload } from 'mint-ui';
// Vue.component(Header.name,Header);
// //轮播图组件
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// //图片懒加载
// Vue.use(Lazyload);

import MintUI from 'mint-ui';
Vue.use(MintUI);
import 'mint-ui/lib/style.css';

//安装图片预览插件
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//导入格式化时间插件
import moment from 'moment';
//定义全局(时间)过滤器
Vue.filter('dataFormat',function (dataStr,pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})

// 导入MUI的样式
import './lib/mui/css/mui.min.css';
import './lib/mui/css/icons-extra.css';

var vm = new Vue({
    el:"#app",
    render:c=>c(app),
    router,//1.4挂载路由到vm实例上
    store:store
})